<template>
	<div>
		<van-cell class="cell_header_title" is-link :title="title" v-bind:value="in_or_out" />


		<div class="item" v-for="odd in odd_list" v-bind:class="[odd.in_or_out?'in':'out']" @click="toDetail(odd.id)">

			<div>{{odd.in_or_out?'入库单':'出库单'}}</div>
			<div>订单编号: {{odd.id}}</div>
			<div>所属库房: {{odd.warehouse_name}}</div>
			<div>来往单位: {{odd.subject_name}}</div>
			<div>下单人员: {{odd.sponsor}}</div>
			<div>操作人员: {{odd.operator}}</div>
			<div>订单生成时间: {{getLocalTime_(odd.create_time)}}</div>
			<div>订单完成时间: {{getLocalTime_(odd.end_time)}}</div>
			<div class="remark">备注与用途: {{odd.remark}}</div>

		</div>
		
		<div style="height: 100px;"></div>

		<van-popup v-model="show" position="bottom" :style="{ height: '60%' }">

			<GoodsList v-bind:odd_id='odd_id'></GoodsList>

		</van-popup>

	</div>
</template>

<script>

	
	import {get_all_odd} from '../../utils/get_all_odd.js'

	import {
		getLocalTime
	} from "../../utils/date.js"

	import GoodsList from "./detail.vue"
	export default {
		name: '',
		components: {
			GoodsList
		},
		props: {},
		data() {
			return {
				show: false,
				in_or_out: '全部',
				all_odd_list: [],
				odd_list: [],
				odd_id: 0,
				status: '',
				title:'',
			}
		},
		methods: {
			
			getLocalTime_(nS) {
				return getLocalTime(nS)
			},
			toDetail(odd_id) {

				// console.log(odd_id)
				this.odd_id = odd_id
				this.show = true
			},
			get_all_odd_call_back(res) {
				
				
					this.all_odd_list = res.sort(function(a,b){
								return b.id - a.id
							})
					
					this.odd_list = []

					for (let i = 0; i < this.all_odd_list.length; i++) {
						
						if(this.all_odd_list[i].status == this.status){
							
							
							this.odd_list.push(this.all_odd_list[i])
							
							
						}
					
					}
				

			},
		},
		computed: {},
		watch: {},
		created() {},
		mounted() {

			get_all_odd(this.get_all_odd_call_back)
			
	        this.status = this.$route.query.status
			
			if(this.status == 'wait'){
				this.title = '正在进行的订单'
			}else if(this.status == 'success'){
				this.title = '已完成订单'
			}


		},
	}
</script>

<style scoped lang="less">
	.cell_header_title {
		background-color: #F0F0F0;
		font-weight: 800;
	}

	.item {
		background-color: #F0F0F0;
		margin: 5px;

		div {
			display: inline-block;
			margin: 5px;
		}

		.remark {
			display: block;
			color: blue;
		}
	}

	.in {
		background-color: #F0F0F0;
	}

	.out {
		background-color: #F0C78A;
		// color: white;
	}
</style>
